<template>
  <div class="map">
    <div
        ref="mapbox"
        id="chart"
        style="height:700px; width:800px; margin: 0 auto;"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js";

const option = {
  title: {
    text: "疫情地图",
    x: "center",
    textStyle: {
      color: "#9c0505"
    }
  },
  series: [
    {
      type: "map",
      map: "china",
      label: {
        show: true,
        color: "#eee",
        fontSize: 10
      },
      itemStyle: {
        borderColor: "#ccc",
        borderWidth: 1,
        areaColor: "#fff"
      },
      emphasis: {
        label: {
          color: "#fff",
          fontSize: 12
        },
        itemStyle: {
          areaColor: "green",
          borderWidth: "yellow"
        }
      },
      zoom: 1.2
    }
  ],
  visualMap: [
    {
      type: "piecewise",
      show: true,
      splitNumber: 6,
      pieces: [
        {
          min: 10000
        },
        {
          min: 1000,
          max: 9999
        },
        {
          min: 100,
          max: 999
        },
        {
          min: 10,
          max: 99
        },
        {
          min: 1,
          max: 9
        },
        {
          min: 0,
          max: 0
        }
      ],
      inRange: {
        color: ["#fff", "#ffaa85", "#ff7b69", "#cc2929", "#8c0d0d", "#660208"]
      },
      itemHeight: 10,
      itemWidth: 10
    }
  ],
  tooltip: {
    tigger: "item",
    formatter: "地区: {b}<br />确诊: {c}"
  },
  toolbox: {
    show: true,
    orient: "horizontal",
    left: "right",
    top: "top",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  }
};
export default {
  name: "Map",
  components: {},
  props: {},
  data() {
    return {
      mychart: ""
    };
  },
  computed: {},
  created() {},
  beforeDestroy() {},
  mounted() {
    this.getData();
    this.mychart = echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option);
  },
  watch: {},
  methods: {
    getData() {
      this.$axios.get("/china").then(res=>{
        console.log(res);
        var lists = res.data.data.map(item=>{
          return{
            name: item.state,
            value: item.latestTotalCases
          }
        });
        console.log(lists);
        option.series[0].data = lists;
        this.mychart.setOption(option);
      })
    }
  }
};
</script>

<style scoped lang="less"></style>
